<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>

<div id="app">
  <h2>{{ msg }}</h2>

  <a @click="add" href="javascript:;">点击</a>
  <counter></counter>

</div>

<script>
  // 组件
  const counter = {
    template:`
      <div>
        <div>点击数量：{{ count }}</div>
        <div>用户名：{{ name }}</div>
      </div>
    `,
    computed: {
      count() {
        // new Vuex都用this.$store获取
        return this.$store.state.count;
      },
      name() {
        return this.$store.state.name;
      }
    }
  };

  // 创建一个Vuex
  const storeVuex = new Vuex.Store({
    // 状态
    state: {
      count: 10,
      name: 'hjy'
    },
    // 改变state的值
    mutations:{
      increament(state) {
        state.count++
      },
      updateName(state, userName) {
        state.name = userName;
      }
    }
  });


  new Vue({
    el: '#app',
    store: storeVuex,
    data: {
      msg:'vuex的使用'
    },
    components: {
      counter
    },
    methods: {
      add() {
        // increament事件类型
        // 修改参数
        this.$store.commit('increament');
        this.$store.commit('updateName','oli');
      }
    }
  })
</script>

</body>
</html>
